import {useState,useEffect} from 'react'
import {getrankList} from '@/services'
import {ISkillRank} from '../../utils/interface'
import { Table  } from 'antd';
import './rankList.less'
const ranklist=['全部','网站2021A班']
const columns=[ 
    {
        title: '排名',
        dataIndex: 'rangking',
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
    },
    {
        title: '面试记录提交数',
        dataIndex: 'count',
    },
    {
        title: '班级',
        dataIndex: 'className',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    }, 
]
const rankList:React.FC=()=>{
    let [rank,setrank]=useState<ISkillRank[]>([])
    let [Switch,setSwitch]=useState(0)
    let [toggle,settoggle]=useState(1)
    useEffect(()=>{
        getrankList().then(res=>{
           if(res.code==200){
            setrank(res.rows)
           }
        })
    },[Switch,toggle])
    return <div className="interviewList">
       <div className="top">
       <section className='head'>
       {
           ranklist.map((item,index)=>{
               return <span className={index===Switch?'active':''} onClick={e=>setSwitch(index)} key={index}>{item}</span>
           })
       }
        </section>
       </div>
        <div className="bottom">
        <section className='last'>
        <span className={toggle===1?'active':''} onClick={()=>{
                  settoggle(1)  
                }}>面试记录榜单</span>
        <span className={toggle===2?'active':''} onClick={()=>{
            settoggle(2)  
        }}>面试提榜单</span>
        </section>
        <Table className='table'  rowKey='rangking' dataSource={rank} columns={columns} ></Table>
        </div>
    </div>
}
export default rankList